<template>
	<view>
		<view class="status_bar"></view>
		<swiper :indicator-dots="true" :autoplay="true" :circular="true" style="height: 150rpx; margin: 0 15rpx;">
			<swiper-item v-for="(item, index) in banners" :key="index" previous-margin="15rpx" next-margin="15rpx" @click="toNotice">
				<image :src="item.imageUrl" style="width: 100%; height: 150rpx; border-radius:15rpx" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view v-for="(item, index) in conversationList" :key="index" @click="toChat(item.conversationID, item.userProfile.userID)">
			<view class="item">
				<uni-badge class="left" :text="item.unreadCount" absolute="rightTop" size="small">
					<image :src="item.userProfile.avatar"></image>
				</uni-badge>
				<view class="content">
					<view class="top">
						<view class="title">{{item.userProfile.nick}}</view>
						<view class="time">{{timestampToText(item.lastMessage.lastTime * 1000)}}</view>
					</view>
					<view class="sub-title">{{item.lastMessage.messageForShow}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import constant from '@/common/constant.js'
    import IMUtil from "@/main/common/IMUtil.js";
	import TimeUtil from '@/main/common/TimeUtil.js'
	import RouteUtil from '@/main/common/RouteUtil';
	export default {
		data() {
			return {
				conversationList: [],
				banners:[]
			};
		},
		onLoad() {
			this.requestNotice();
		},
		onShow() {
			this.getConversationList();
		},
		methods: {
			async requestNotice(){
				uni.$http.get("/api/banner/list")
					.then(res => {
						this.banners = res.data;
					})
			},
			// 获取全量的会话列表
			getConversationList(){
				IMUtil.getConversationList().then(res=>{
					this.conversationList = res;
				})
			},
			toChat(conversationID, texcode){
				IMUtil.toChat(texcode)
			},
			toNotice(){
				RouteUtil.toNoticeList()
			},
			timestampToText(timestamp) {
				return TimeUtil.timestampToText(timestamp)
			}
		}
	}
</script>

<style lang="scss">
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
	
	.item{
		display: flex;
		flex-direction: row;
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 0.5px;
		
		.left{
			position: relative;
			width: 100rpx;
			height: 100rpx;
			margin-right: 20rpx;
			image{
				width: 100rpx;
				height: 100rpx;
				border-radius: 10rpx;
			}
		}
		
		.content{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			
			.top{
				display: flex;
				flex-direction: row;
				.title{
					flex: 1;
					font-size: 36rpx;
					color: #222;
				}
				.time{
					font-size: 20rpx;
					color: #888;
				}
			}
			
			.sub-title{
				font-size: 28rpx;
				color: #555;
				margin-top: 10rpx;
			}
			
		}
		
	}
</style>

